<template>
  <Nav>
    {{ $t('union.buy.nav') }}
    <template #right>
      <md-icon name="search" size="lg" @click="router.push('/union/list')"></md-icon>
    </template>
  </Nav>
  <div class="page-union-buy">
    <div class="header">
      <div class="icon">
        <img src="@/assets/union/buy/header-bj.png" style="top:0; left:0;" class="animate__pulse animate__animated animate__infinite animate__faster">
        <img src="@/assets/union/buy/header-footer.png" style="width:250px;top:70px; left:25px;">
        <img src="@/assets/union/buy/header-center.png" style="width:150px;top:65px; left:80px;">
        <img src="@/assets/union/buy/header-center-top.png" style="width:65px;top:20px; left:150px;" class="animate__updown animate__animated animate__infinite animate__slow">
        <img src="@/assets/union/buy/header-right.png" style="width:25px;top:85px; left:200px;">
        <img src="@/assets/union/buy/header-left.png" style="width:75px;top:25px; left:45px;" class="animate__headShake animate__animated animate__infinite animate__fast">
        
        <img src="@/assets/union/buy/header-x-left.png" style="width:25px;top:190px; left:25px;" class="animate__updown animate__animated animate__infinite animate__slower animate__delay-2s">
        <img src="@/assets/union/buy/header-x-right.png" style="width:23px;top:75px; left:285px;" class="animate__updown animate__animated animate__infinite animate__slower animate__delay-3s">
        <img src="@/assets/union/buy/header-x-center.png" style="width:28px;top:165px; left:260px;" class="animate__updown animate__animated animate__infinite animate__slower animate__delay-4s">
        
        <img src="@/assets/union/buy/header-x.png" style="width:10px;top:170px; left:140px;" class="animate__flash animate__animated animate__infinite animate__slower animate__delay-1s">
        <img src="@/assets/union/buy/header-x.png" style="width:10px;top:113px; left:238px;" class="animate__flash animate__animated animate__infinite animate__slower animate__delay-3s">
        <img src="@/assets/union/buy/header-x.png" style="width:10px;top:90px; left:115px;" class="animate__flash animate__animated animate__infinite animate__slower">
        <img src="@/assets/union/buy/header-x.png" style="width:10px;top:135px; left:55px;" class="animate__flash animate__animated animate__infinite animate__slower animate__delay-2s">
      </div>
    </div>
    <div class="buy" @click="show = true">{{ $t('union.buy.buy') }}</div>
    <md-popup v-model="show" position="bottom">
      <md-popup-title-bar only-close :title="$t('union.buy.parent')" :describe="$t('union.buy.parent_describe')" title-align="left" @cancel="show = false" />
      <div style="background: #fff; padding: 20px">
        <md-input-item v-model="parent" placeholder="0x" is-highlight></md-input-item>
        <div style="padding-top: 20px">
          <md-button type="primary" @click="start" round>{{ $t('confirm') }}</md-button>
        </div>
      </div>
    </md-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { t } from '@/lang'
import { toast } from '@/style'
import { isBuy, buyStatus, buy, address } from '@/web3/contracts/union'
import { allowance, approve } from '@/web3/contracts/usdt';
import Nav from '@/components/nav.vue'

const router = useRouter()

const show = ref(false)

// 上级
const parent = ref('')

// 认购
const action = async() => {
  show.value = false
  // 判断可用对比价格
  if(Number(await allowance(address)) == 0) {
    // 授权
    toast(t('contracts.usdt.approve'), 'ring', 0)
    try{
      await approve(address)
    } catch(e) {
      return toast(false)
    }
  }
  toast(t('union.buy.load'), 'ring', 0)
  buy(parent.value).then(res => {
    toast(t('union.buy.over'))
  }).catch(err => {
    toast(err.message)
  })
}

// 检查
const start = async() => {
  if(!parent.value) return 
  
  try{
    // 判断上级是否为公会
    if(!await buyStatus(parent.value)) {
      throw Error()
    }
  } catch(e) {
    return toast(t('union.buy.parent_error'))
  }
  
  try{
    // 判断是否能购买
    await isBuy(parent.value)
    // 认购
    action()
  } catch(e) {
    toast(t('union.buy.is'))
  }
}

</script>

<style lang="scss" scoped>
  .page-union-buy{
    min-height: 100%;
    background: url('@/assets/union/buy/bj.jpg') center center no-repeat;
    background-size: cover;

    .header{
      width: 300px;
      height: 300px;
      padding-top: 200px;
      margin: 0 auto;
      
      img{ 
        width: 100%;
      }
      
      .icon{
        position: relative;
        
        img{
          position: absolute;
        }
      }
    }
    
    .buy{
      width: 120px;
      margin: 0 auto;
      line-height: 50px;
      border-radius: 50px;
      text-align: center;
      background-image: linear-gradient(to right, #e33ffe , #0565f8);
      color: #fff;
    }
  }
</style>